<script setup>
  import { onLoad,onShow } from '@dcloudio/uni-app'
import { ref } from 'vue';
import { getTaskDetail } from '../../apis/task';
import { showFailToast } from '../../utils';

  const taskId = ref('')
  const taskDetail = ref({})
  // 获取地址参数
  onLoad((params) => {
    console.log(params.id)
    taskId.value = params.id
    getTaskDetail(taskId.value,res => {
      console.log('taskDetail',res.data);
      if(res.code === 200){
        taskDetail.value = res.data
      }else{
        showFailToast(res.msg)
      }
    })
  })




</script>

<template>
  <view class="page-container">
    <view class="search-bar">
      <text class="iconfont icon-scan"></text>
      <input class="input" type="text" placeholder="输入运单号" />
    </view>
    <scroll-view scroll-y class="task-detail">
      <view class="scroll-view-wrapper">
        <view class="basic-info panel">
          <view class="panel-title">基本信息</view>
          <view class="timeline">
            <view class="line"
              >{{taskDetail.startAddress}}</view
            >
            <view class="line">{{taskDetail.endAddress}}</view>
            <navigator
              hover-class="none"
              url="/subpkg_task/guide/index"
              class="guide"
            >
              <text class="iconfont icon-guide"></text>
              <text>开始导航</text>
            </navigator>
          </view>
          <view class="info-list">
            <template v-if="taskDetail.status === 1">
              <view class="info-list-item">
                <text class="label">任务编号</text>
                <text class="value">{{taskDetail.transportTaskId}}</text>
              </view>
              <view class="info-list-item">
                <text class="label">提货联系人</text>
                <text class="value">{{taskDetail.finishHandoverName}}</text>
              </view>
              <view class="info-list-item">
                <text class="label">联系电话</text>
                <text class="value">{{taskDetail.finishHandoverPhone}}</text>
              </view>
              <view class="info-list-item">
                <text class="label">预计提货时间</text>
                <text class="value">2022.05.04 13:00</text>
              </view>
              <view class="info-list-item">
                <text class="label">实际提货时间</text>
                <text class="value">2022.05.04 13:00</text>
              </view>
            </template>

            <view class="hr"></view>

            <template v-if="taskDetail.status === 2">
              <view class="info-list-item">
                <text class="label">交付联系人</text>
                <text class="value">李四</text>
              </view>
              <view class="info-list-item">
                <text class="label">联系电话</text>
                <text class="value">13212345678</text>
              </view>
              <view class="info-list-item">
                <text class="label">预计送达时间</text>
                <text class="value">2022.05.05 10:00</text>
              </view>
              <view class="info-list-item">
                <text class="label">实际送达时间</text>
                <text class="value">2022.05.05 10:00</text>
              </view>
            </template>

        </view>
        </view>
        <view class="except-info panel" v-if="taskDetail.exceptionList && taskDetail.exceptionList.length > 0">
          <view class="panel-title">异常信息</view>
          <view
            v-for="exception in taskDetail.exceptionList"
            :key="exception.exceptionType"
            class="info-list"
          >
            <view class="info-list-item">
              <text class="label">上报时间</text>

              <text class="value">{{ exception.exceptionTime }}</text>

            </view>

            <view class="info-list-item">
              <text class="label">异常类型</text>

              <text class="value">{{ exception.exceptionType }}</text>

            </view>

            <view class="info-list-item">
              <text class="label">处理结果</text>

              <text class="value">{{ exception.handleResult }}</text>
            </view>
          </view>
        </view>

        <view class="panel pickup-info" v-if="taskDetail.status === 2 || taskDetail.status === 4">
          <view class="panel-title">提货信息</view>
          <view class="label">提货凭证</view>
          <view class="pictures">
            <image v-for="cargoUp in taskDetail.cargoPickUpPictureList" class="picture" :key="cargoUp.url" :src="cargoUp.url" mode=""></image>
            <view v-if="false" class="picture-blank">暂无图片</view>
          </view>
          <view class="label">货品照片</view>
          <view class="pictures">
            <template v-for="item in taskDetail.cargoPictureList" :key="item.url" >
              <image  class="picture" :src="item.url" mode=""></image>
            </template>
            <view v-if="false" class="picture-blank">暂无图片</view>
          </view>
        </view>

        <view
            v-if="taskDetail.status === 4 || taskDetail.status === 6"
            class="delivery-info panel"
          >
            <view class="panel-title">交货信息</view>

            <view class="label">交货凭证</view>

            <view class="pictures">
              <image
                v-for="certificate in taskDetail.certificatePictureList"
                :key="certificate.url"
                class="picture"
                :src="certificate.url"
              ></image>

              <view v-if="false" class="picture-blank">暂无图片</view>

            </view>

            <view class="label">货品照片</view>

            <view class="pictures">
              <image
                v-for="delivery in taskDetail.deliverPictureList"
                :key="delivery.url"
                class="picture"
                :src="delivery.url"
              ></image>

              <view v-if="false" class="picture-blank">暂无图片</view>

            </view>

          </view>

              </view>
    </scroll-view>

    <view class="toolbar" v-if="taskDetail.status === 1">
      <navigator
        :url="`/subpkg_task/delay/index?id=${taskDetail.id}`"
        hover-class="none"
        class="button secondary"
        >延迟提货</navigator
      >
      <navigator
        :url="`/subpkg_task/pickup/index?id=${taskDetail.id}`"
        hover-class="none"
        v-if="!taskDetail.enablePickUp"
        class="button primary"
        >提货</navigator
      >
      <button v-else disabled hover-class="none" style="color: #FFF;" class="button primary">提货</button>

    </view>
    <view class="toolbar" v-if="taskDetail.status === 2">
      <navigator
        :url="`/subpkg_task/except/index?transportTaskId=${taskDetail.transportTaskId}`"
        hover-class="none"
        class="button secondary"
        >异常上报
      </navigator>
      <navigator
        :url="`/subpkg_task/delivery/index?id=${taskDetail.id}`"
        hover-class="none"
        class="button primary"
        >交付</navigator
      >
    </view>
    <view class="toolbar" v-if="taskDetail.status === 4">
      <navigator
             :url="`/subpkg_task/record/index?transportTaskId=${taskDetail.transportTaskId}&actualDepartureTime=${taskDetail.actualDepartureTime}`"
             hover-class="none"
             class="button primary block"
           >
             回车登记
           </navigator>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
